<div id="main">
<div id="contents">
    <form method="post" action="#" name="filters" id="form1">
        <fieldset>
            <legend>
                <label sid="routing.add_rule"></label>
            </legend>
            <div class="frame_tab_layer">
                <table class="cmenutitle" cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tbody>
                    <tr>
                        <td class="frame_tab_left">
                            <label for="">
                                <label sid="routing.range"></label>
                            </label>
                        </td>
                        <td class="frame_tab_right">
                            <select id="routeType" onchange="changeType();" name="routeType">
                                <option value="0" sid="routing.net"></option>
                                <option value="1" sid="routing.host"></option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="frame_tab_left">
                            <label for="ipaddressid">
                                <label sid="routing.del_dest"></label>
                            </label>
                        </td>
                        <td class="frame_tab_right">
                            <input id="ipaddressid" type="text" maxlength="15" size="17" name="ipaddressid">
                            <span class="x-form-tip" id="ipaddressidTip"></span>
                        </td>
                    </tr>
                    <tr id="netmasktrid">
                        <td class="frame_tab_left">
                            <label for="netmaskid">
                                <label sid="routing.netmask"></label>
                            </label>
                        </td>
                        <td class="frame_tab_right">
                            <input id="netmaskid" type="text" maxlength="15" size="17" name="netmaskid">
                            <span class="x-form-tip" id="netmaskidTip"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="frame_tab_left">
                            <label for="gatewayid">
                                <label sid="routing.gateway"></label>
                            </label>
                        </td>
                        <td class="frame_tab_right">
                            <input id="gatewayid" type="text" maxlength="15" size="17" name="gatewayid">
                            <span class="x-form-tip" id="gatewayidTip"></span>

                        </td>
                    </tr>
                    <tr>
                        <td class="frame_tab_left">
                            <label for="interfaceid">
                                <label sid="routing.interface"></label>
                            </label>
                        </td>
                        <td class="frame_tab_right">
                            <select id="interfaceid" onchange="changeInterface();" name="interfaceid">
                                <option value="custom" sid="routing.custom"></option>
                                <option value="LAN" sid="routing.LAN"></option>
                                <option selected="" value="WAN" sid="routing.WAN"></option>
                            </select>
                            <input id="custinterid" type="text" maxlength="15" size="17" name="custinterid">
                        </td>
                    </tr>
                    <tr>
                        <td class="frame_tab_left">
                            <label for="commentid">
                                <label sid="routing.comment"></label>
                            </label>
                        </td>
                        <td class="frame_tab_right">
                            <input id="commentid" type="text" maxlength="15" size="17" name="commentid">
                        </td>
                    </tr>
                    <tr>
                        <td class="frame_tab_center" colspan="2">
                            <input id="save_button" class="button" type="button" name="save_button" sid="sbutton.add">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </fieldset>
        <br>
        <fieldset>
            <legend>
                <label sid="routing.del_title"></label>
            </legend>
            <div class="frame_tab_layer">
                <table id="routeruletable" class="cmenutitle" cellspacing="0" cellpadding="0" border="0" width="100%"> </table>
            </div>
        </fieldset>
    </form>
</div>
</div>
<br>
<div id="helpContainer">
    <div id="help">
        <div>
            <h2>
                <label sid="share.help"></label>
            </h2>
        </div>
        <div id="helpBody">
        <dl>
            <dt class="term">
                <label sid="routing.title"></label>
            </dt>
            <dd class="definition">
                <label sid="routing.introduction"></label>
            </dd>
        </dl>
    </div>
    </div>
</div>
<script type="text/javascript" src="js/libTable.js"></script>
<script type="text/javascript">


    $(document).ready(function(){
        $.formValidator.initConfig({debug:false,submitOnce:true,submitButtonID:"save_button",
            onError:function(msg, obj, errorlist) {

            },
            onSuccess:function(){
                var ipaddressid = $("#ipaddressid").val();
                var netmaskid = $("#netmaskid").val();
                var gatewayid = $("#gatewayid").val();
                var interfaceid = $("#interfaceid").val();
                var custinterid;
                if($("#interfaceid").val()=="LAN"){
                    custinterid="br0";
                }else if($("#interfaceid").val()=="WAN"){
                    custinterid="eth2.2";
                }else{
                    custinterid=$("#custinterid").val();
                }
                var commentid=$("#commentid").val();

                if(interfaceid=="custom"&&$.trim(commentid=="")){
                    //show_message("err",msg.route_error);
                    alert(msg.route_error);
                }else{
                    if($("#save_button").val()==sbutton.modify){
                        virtual_data[old_virtual][0]=ipaddressid;
                        virtual_data[old_virtual][1]=netmaskid;
                        virtual_data[old_virtual][2]=gatewayid;
                        virtual_data[old_virtual][3]=interfaceid;
                        virtual_data[old_virtual][4]=custinterid;
                        virtual_data[old_virtual][6]=commentid;
                    }else{
                        var newarray= new Array();
                        newarray[0]=ipaddressid;
                        newarray[1]=netmaskid;
                        newarray[2]=gatewayid;
                        newarray[3]=interfaceid;
                        newarray[6]=commentid;
                        newarray[4]=custinterid;
                        newarray[5]='';
                        virtual_data.push(newarray);
                        $("#save_button").val(sbutton.add);
                    }
                    var resultStr = JSONTostr(virtual_data);

                    var settext='&id2110='+resultStr;
                    submitform(modules["set_data"],settext,"routing_main_load");
                    load_html();
                }
            }
        });

        $("#ipaddressid").formValidator({
            onFocus:errmsg.Info9
        }).regexValidator({
                    regExp:regexEnum.notempty,
                    onError:errmsg.Info3
                }).regexValidator({
                    regExp:regexEnum.ip4,
                    onError:errmsg.Info1
                });
        $("#netmaskid").formValidator({
            onFocus:errmsg.Info8
        }).regexValidator({
                    regExp:regexEnum.notempty,
                    onError:errmsg.Info3
                }).regexValidator({
                    regExp:regexEnum.ip4,
                    onError:errmsg.Info1
                });
        $("#gatewayid").formValidator({
            onFocus:errmsg.Info15
        }).regexValidator({
                    regExp:regexEnum.notempty,
                    onError:errmsg.Info3
                }).regexValidator({
                    regExp:regexEnum.ip4,
                    onError:errmsg.Info1
                });


    });

    var virtual_data = new Array();
	var old_virtual=0;
	load_html();

	function load_html(){
	var sendtext = '&id=2110';
	DataRequest("get_json",sendtext,function(data){	
		var tmparray = strToJSON(data["id2110"]);
		//if(tmparray!=""&&tmparray){
		virtual_data = tmparray;
		virtual_paint_list(tmparray);
		//}
	});
}

function virtual_paint_list(data){
 var data_new=new Array();
 var j=0;
  for(var i=0;i<data.length;i++){
 	var ID = parseInt(parseInt(i)+1);
  var ipaddressid=replacestr(data[i][0]);
  var netmaskid=replacestr(data[i][1]);
  var gatewayid=replacestr(data[i][2]);

  var interfaceid=replacestr(data[i][3])+"("+replacestr(data[i][4])+")";
  var commentid=replacestr(data[i][6]);
  
  
  data_new.push({ID:ID,ipaddressid:ipaddressid,netmaskid:netmaskid,gatewayid:gatewayid,interfaceid:interfaceid,commentid:commentid});
  j = i;
 }
 var fun_arr = [{type:"modify",name:"virtual_change"},{type:"del",name:"virtual_del"}];
 var tab = new libTable(new Array(routing.Numbers,routing.del_dest,routing.del_netmask,routing.del_gateway,routing.del_interface,routing.del_comment,msg.op),data_new,1,10);
 print_table("routeruletable",tab,fun_arr, true);
}

function virtual_change(id,ipaddressid,netmaskid,gatewayid,interfaceid,commentid)
{
 obj = virtual_data[parseInt(id)-1];
 old_virtual = parseInt(id)-1;
 with(obj){
  $("#ipaddressid").val(ipaddressid);
  if(netmaskid=="--"){
  	listselect("routeType",1);
  	$("#netmasktrid").hide();
  }else{
  	listselect("routeType",2);
  	$("#netmasktrid").show();
  	$("#netmaskid").val(netmaskid);
  }
  
  $("#gatewayid").val(gatewayid);
  
  var interfacetypes=interfaceid.split("(");
  
  if(interfacetypes[0]=="custom"){
  	var custintervalues=interfacetypes[1].split(")");
  	$("#custinterid").val(custintervalues[0]);
  	listselect("interfaceid",interfacetypes[0]);
  }else{
  	listselect("interfaceid",interfacetypes[0]);
  }
  
  $("#commentid").val(commentid);
 }
 Modify_button();
}



function virtual_del(id,ipaddressid,netmaskid,gatewayid,interfaceid,commentid){
  if(interfaceid=="LAN(br0)"){
      interfaceid = "br0";
  }else if(interfaceid=="WAN(eth2.2)"){
      interfaceid ="eth2.2";
  }
 if(confirm(msg.confirm_del)){
// show_message("del",msg.deleting);
 virtual_data[parseInt(id)-1] = [];
 var resultStr = JSONTostr(virtual_data);
  var settext='&id2110='+resultStr+"&id2111="+ipaddressid+","+netmaskid+","+gatewayid+","+interfaceid+","+commentid+";";
  submitform(modules["set_data"],settext,"routing_main_load");
  load_html();
 }
}

    function changeType(){
        if($("#routeType").val()==1){
            $("#netmasktrid").hide();
            $("#netmaskid").unFormValidator(true);
        }else{
            $("#netmasktrid").show();
            $("#netmaskid").unFormValidator(false);
        }
    }

    function changeInterface(){
        if($("#interfaceid").val()=="custom"){
            $("#custinterid").show();
        }else{
            $("#custinterid").hide();
        }
    }


</script>
